<template>
    <div>
        <el-form class="dataForm animated zoomIn" :model="firstDataForm" :rules="firstRules" ref="firstDataForm" label-position="left" label-width="100px" v-show="display.first===true">
            <el-form-item label="手机号:" prop="phone">
                <el-input v-model="firstDataForm.phone" auto-complete="new-password" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
                <el-input v-model="firstDataForm.email" auto-complete="new-password" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input v-model="firstDataForm.password" auto-complete="new-password" show-password clearable></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="confirmPassword">
                <el-input v-model="firstDataForm.confirmPassword" auto-complete="new-password" show-password clearable></el-input>
            </el-form-item>
            <el-form-item label="备注:" prop="remark" style="margin-top: 28px;">
                <el-input type="textarea" :rows="4" maxlength="30" show-word-limit v-model="firstDataForm.remark"></el-input>
            </el-form-item>
        </el-form>
        <el-form class="dataForm animated zoomIn" :model="secondDataForm" :rules="secondRules" ref="secondDataForm" label-position="left" label-width="100px" v-show="display.second===true">
            <el-form-item label="用户姓名:" prop="username">
                <el-input v-model="secondDataForm.username" auto-complete="new-password" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别:" prop="sex">
                <el-radio v-model="secondDataForm.sex" label="1">男</el-radio>
                <el-radio v-model="secondDataForm.sex" label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="年龄:" prop="age">
                <el-input-number v-model="secondDataForm.age" :step="1" controls-position="right" :min="1" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="身份证号:" prop="idCard">
                <el-input v-model="secondDataForm.idCard" auto-complete="new-password" clearable></el-input>
            </el-form-item>
            <el-form-item label="公司名称:" prop="company">
                <el-input v-model="secondDataForm.company" auto-complete="new-password" clearable></el-input>
            </el-form-item>
            <el-form-item label="职位:" prop="position">
                <el-input v-model="secondDataForm.position" auto-complete="new-password" clearable></el-input>
            </el-form-item>
        </el-form>
        <el-form class="dataForm animated zoomIn third" :model="thirdDataForm" :rules="thirdRules" ref="thirdDataForm" label-position="left" label-width="90px" v-show="display.third===true">
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="手机号: " > <span style="color: white">{{firstDataForm.phone}}</span> </el-form-item> </el-col>
                <el-col :span="12"> <el-form-item label="邮箱: " > <span style="color: white">{{firstDataForm.email}}</span> </el-form-item> </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="密码: " > <span style="color: white">******</span> </el-form-item> </el-col>
                <el-col :span="12"> <el-form-item label="备注: " > <span style="color: white">{{firstDataForm.remark}}</span> </el-form-item> </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="用户姓名: " > <span style="color: white">{{secondDataForm.username}}</span> </el-form-item> </el-col>
                <el-col :span="12"> <el-form-item label="性别: " > <span style="color: white">{{secondDataForm.sex === '1' ? '男' : '女'}}</span> </el-form-item> </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="年龄: " > <span style="color: white">{{secondDataForm.age}}</span> </el-form-item> </el-col>
                <el-col :span="12"> <el-form-item label="身份证号: " > <span style="color: white">{{secondDataForm.idCard}}</span> </el-form-item> </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="公司名称: " > <span style="color: white">{{secondDataForm.company}}</span> </el-form-item> </el-col>
                <el-col :span="12"> <el-form-item label="职位: " > <span style="color: white">{{secondDataForm.position}}</span> </el-form-item> </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-form-item label="验证码:" prop="captcha">
                    <el-input v-model="thirdDataForm.captcha" auto-complete="new-password" style="width: 200px" clearable></el-input>
                    <el-image ref="captcha" :src="captchaUrl" class="captcha" @click="refreshCaptcha"></el-image>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { validPhone, validUsername, validatePassword, validEmail, validName, validIdCard } from "@/utils/validate";
import { register } from "@/api/register";
import JSEncrypt from 'jsencrypt';

export default {
    name: 'formInfo',
    props: {
        activeSteps: {
            type: Number,
            default: 0
        }
    },
    data(){
        const againConfirmPassword = (rule, value, callback) => {
            if (value !== this.firstDataForm.password) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        };
        return {
            display: { first: true, second: false, third: false },
            dataForm: {},
            firstDataForm: {
                phone: '',
                email: '',
                password: '',
                confirmPassword: '',
                remark: ''
            },
            secondDataForm: {
                username: '',
                sex: '1',
                age: '',
                idCard: '',
                company: '',
                position: '',
            },
            thirdDataForm: {
                captcha: ''
            },
            firstRules: {
                phone: [ {required: true, trigger: "blur", validator: validPhone} ],
                email: [ {required: true, trigger: "blur", validator: validEmail} ],
                captcha: [ {required: true, message: '请输入验证码', trigger: 'blur'} ],
                password: [ {required: true, trigger: "blur", validator: validatePassword} ],
                confirmPassword: [ {required: true, trigger: "blur", message: '请再一次输入密码'}, {trigger: "blur", validator: againConfirmPassword} ],
            },
            secondRules: {
                username: [ { required: true, trigger: "blur", validator: validUsername } ],
                sex: [ { required: true, trigger: "blur" } ],
                age: [ { required: true, trigger: "blur" } ],
                idCard: [ { required: true, trigger: "blur", validator: validIdCard } ],
                company: [ { required: true, message: '请输入公司名称', trigger: "blur" } ],
                position: [ { required: true, message: '请输入职位', trigger: "blur" } ],
            },
            thirdRules: {},
            captchaUrl: '',
            remember: {},
            active: 1
        }
    },
    computed: {

    },
    methods: {
        submitForm(){
            Object.assign(this.dataForm, this.firstDataForm, this.secondDataForm, this.thirdDataForm);
            this.remember.password = this.dataForm.password;
            this.remember.confirmPassword = this.dataForm.confirmPassword;
            register(this.passwordEncrypt()).then(res => {
                this.dataForm.password = this.remember.password;
                this.dataForm.confirmPassword = this.remember.confirmPassword;
                if(res.status === 200){
                    this.$confirm('恭喜您，注册成功', '',
                        {confirmButtonText: '确定', type: 'success', showCancelButton: false, showClose: false, closeOnClickModal: false, closeOnPressEscape: false })
                        .then(() => {
                            window.close();
                            this.$router.push({path: '/Login'});
                        })
                }else{
                    this.dataForm.password = this.remember.password;
                    this.dataForm.confirmPassword = this.remember.confirmPassword;
                    this.refreshCaptcha();
                    if(res.code === 20100 || res.code === 20400){
                        this.$message({ message: res.message, type: 'warning' });
                    }
                }
            });
        },
        resetForm(formName) {
            this.activeSteps = 0;
            this.refreshCaptcha();
            this.$refs[formName].resetFields();
            this.display = {first: true, second: false, third: false};
        },
        refreshCaptcha(){
            this.captchaUrl = process.env.VUE_APP_REQUEST_IP_PORT + '/base/login/getCaptcha?phone='+this.dataForm.phone+'&type=0&p=' + Math.random();
        },
        passwordEncrypt() {
            let jse = new JSEncrypt();
            let publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCSNg1Zr8yAtvCCnVkk67CMtPmMBQ2OetaZn0BikuhBgo6wbCaIHR1FHb0gSO05RisnfWnbzzygP1VRUaBoNtfX1HfYL1FqVjFy3+GXEnve7eTZx/s7arr1gNHELNu6ZMLSKswrVMym69gE/dwWYrzKjcUNdoZHhlEjgtsrYRz+BQIDAQAB'
            jse.setPublicKey(publicKey);
            this.dataForm.password = jse.encrypt(this.dataForm.password);
            this.dataForm.confirmPassword = jse.encrypt(this.dataForm.confirmPassword);
            return this.dataForm;
        },
        changeStep(val){
            let formName = '';
            if(this.display.first){
                formName = 'secondDataForm';
                this.validateForm('firstDataForm', val);

            }else if(this.display.second){
                formName = val === 'up' ? 'firstDataForm' : 'thirdDataForm';
                if(val === 'next'){
                    this.validateForm('secondDataForm', val);
                }else{
                    this.$emit('activeSteps', 1);
                    this.display = {first: val === 'up' ? true : false, second: false, third: val === 'up' ? false : true};
                }
            }else if(this.display.third){
                formName = 'secondDataForm';
                Object.assign(this.dataForm, this.thirdDataForm);
                this.$emit('activeSteps', val === 'up' ? 2 : 3);
                this.display = {first: false, second: val === 'up' ? true : false, third: false};
            }
            this.$emit('stepDisplay', this.display, formName);
        },
        validateForm(formName, val){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    Object.assign(this.dataForm, formName === 'firstDataForm' ? this.firstDataForm : this.secondDataForm);
                    // this.$emit('activeSteps', formName === 'firstDataForm' ? 2 : (val === 'up' ? 1 : 2));
                    if (formName === 'firstDataForm') {
                        this.$emit('activeSteps', 2);
                        this.display = {first: false, second: val === 'up' ? false : true, third: false};
                    } else if (formName === 'secondDataForm') {
                        this.$emit('activeSteps', 3);
                        this.display = {first: val === 'up' ? true : false, second: false, third: val === 'up' ? false : true};
                    }
                } else {
                    return false;
                }
            });
        }
    },
    created() {
        this.refreshCaptcha();
        this.activeSteps = 0;
    },
    mounted() {

    }
}
</script>

<style>
    #detailContrainer {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
        width: 100%;
        min-height: 100%;
        background: white;
    }

    #detailContrainer.slide-enter-active {
        animation: .9s bounceInDown;
    }

    @keyframes bounceInDown {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(0);
        }
    }

    #content.contentDetail {
        display: block;
        margin-bottom: 0;
    }

    .el-textarea .el-input__count {
        color: #0c0c0c;
        background: #15102000;
    }

</style>
